<template>
	<view class="container">

		<uni-segmented-control :current="currentIndex" :values="items" style-type="text" active-color="#007aff"
			@clickItem="onClickItem" />

		<view v-if="currentIndex == 0">
			<view style="padding-top: 10px;"></view>
			<uni-forms ref="baseForm" :modelValue="liuzhuanForm" labelPosition="left" border labelWidth="100px">
				<view style="padding-top: 10px;"></view>
	
				<uni-forms-item label="来文单位" required>
					<uni-easyinput type="text" v-model="liuzhuanForm.danwei" />
				</uni-forms-item>
	
				<uni-forms-item label="文号">
					<uni-easyinput type="text" v-model="liuzhuanForm.wenhao" />
				</uni-forms-item>
	
				<uni-forms-item label="标题" required>
					<uni-easyinput type="textarea"  @change="chuanci2" @input="chuanci2"  v-model="liuzhuanForm.biaoti" />
				</uni-forms-item>
	
				<uni-forms-item label="来文时间" required>
					<uni-datetime-picker @click="chuanci()" @change="chuanci2" @maskClick="chuanci2()"  type="date" return-type="string" v-model="liuzhuanForm.chengwenDate" />
				</uni-forms-item>
	
				<uni-forms-item label="内容摘要">
					<uni-easyinput type="textarea" v-model="liuzhuanForm.zhaiyao" />
				</uni-forms-item>
				
				<!-- 附件模块 -->
				<uni-forms-item label="附件"></uni-forms-item>
				<view v-for="(item,index) in files.values()" :key="index">
					<view v-if="item.type=='success' && item.size <=1048576">[{{(item.size/1024).toFixed(2)}}KB] {{item.name.substring(0,30)}}
					
					</view>
					<view v-if="item.type=='success' && item.size >1048576">[{{(item.size/1048576).toFixed(2)}}MB] {{item.name.substring(0,30)}}
						
					</view>
					<view v-if="item.type!='success'"><i style="color: royalblue;">上传{{item.progress}}%</i> {{item.name.substring(0,30)}}</view>
				</view>
				<lsj-upload ref="lsjUpload" childId="upload1" height="40px" :size="uploadconfig.size"
					:instantly="uploadconfig.instantly" :formats='uploadconfig.formats' :option="option"
					@change="onChange" @progress="onprogress" @uploadEnd="onuploadEnd">
					<button class="btn-fujian" @click="fuckyou">添加附件</button>
					
				</lsj-upload>
				<view class="tips">说明：从此上传图片将无法预览，单个文件请控制在100MB以内</view>
	
				<!-- 选人模块 -->
				<uni-forms-item label="审核人" required></uni-forms-item>
				<view v-for="(item, idx) in liuzhuanForm.auditors" :key="idx">
					<view v-if="idx != liuzhuanForm.auditors.length - 1">
						<uni-row>
							<uni-col :span="10">
								<view v-if="idx>0" class="step-arrow">
									<uni-icons type="bottom" size="mini" color='#a5eaff'></uni-icons>
								</view>
							</uni-col>
						</uni-row>
	
						<view class="step">
							<uni-row>
								<uni-col :span="10">
									<view class="step-info-left">{{item.stepName || item.positionName}}</view>
								</uni-col>
								<uni-col :span="14">
									<view class="step-info-right">{{item.name}}</view>
								</uni-col>
							</uni-row>
						</view>
					</view>
				</view>
	
				<view style="padding-top: 30px;"></view>
				<button type="primary" @click="clickApply">提交</button>
			</uni-forms>
		</view>

		<view v-if="currentIndex === 1">
			<view >
				<uni-search-bar v-model="keyword" radius="100" placeholder="输入文件关键字"  cancelButton="none" @confirm="search"/>
			</view>
			<view v-for="(item, idx) in applyRecord" style="padding-bottom: 10px;" :key="idx">
				<!-- {{item}} -->
				<view class="card" @click="seeDetail(idx)">
					<view class="card-title">
						<uni-row>
							<uni-col :span="20">
								<view class="card-title-left">&nbsp;{{item.biaoti}}</view>
							</uni-col>
							<uni-col :span="4">
								<view class="card-title-right">
									<uni-tag text="审核" size="mini" type="warning" v-if="item.sta===0&&item.chexiao==0"></uni-tag>
									<uni-tag text="通过" size="mini" type="primary" v-if="item.sta===1&&item.chexiao==0"></uni-tag>
									<uni-tag text="拒绝" size="mini" type="error" v-if="item.sta===2&&item.chexiao==0"></uni-tag>
									<uni-tag text="撤销" size="mini" type="default" v-if="item.chexiao===1"></uni-tag>
								</view>
							</uni-col>
						</uni-row>
					</view>
					<view class="card-body">
						<view>{{item.attaches.length > 0 ? item.attaches[0].name : ''}}</view>
					</view>
					<view class="card-footer">
						<uni-row>
							<uni-col :span="12">
								<view class="card-footer-left">
									{{item.uName}}
								</view>
							</uni-col>
							<uni-col :span="12">
								<view class="card-footer-right">
									{{getFormatedTimeStr(item.createTime,"YYYY-MM-DD hh:mm:ss")}}
								</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</view>
			<uni-load-more :status="moreStatus"></uni-load-more>
		</view>

	</view>
</template>

<script>
	import moment from 'moment'
	import {
		websock
	} from '../../net/websock'
	import {uploadconfig} from '../../const'
	import { quchongAuditors } from '../../utils/util'

	export default {
		data() {
			return {
				// 上传参数部分没有事情不要乱动
				uploadconfig,
				option: {
						url:uploadconfig.url,
						name: 'file',
						header: {},				
						formData: {}			
					},
				formats:uploadconfig.formats,
				instantly: uploadconfig.instantly,			
				size: uploadconfig.size,						
				files: new Map(),
				// 上传参数部分没有事情不要乱动

				items: ['发起提交', '查看数据'],

				currentIndex: 0,

				moreStatus: 'more',
				applyRecord: [],

				keyword: '',

				liuzhuanForm: {
					bianhao: '',
					danwei: '',
					wenhao: '',
					biaoti: '',
					chengwenDate: '',
					readers: [],
					attaches: [],
					auditors: []
				}
			}
		},
		async onReady() {

			this.getNewestRecord()

			let auditors = await websock.getAuditors({typ: 18})
			console.log('auditors', auditors)
			quchongAuditors(auditors)
			this.liuzhuanForm.auditors = auditors
		},
		// 下拉刷新，获取最新的数据
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			if (this.currentIndex == 0) {
				uni.stopPullDownRefresh()
			} else {
				this.getNewestRecord()
			}
		},
		// 上拉刷新，获取历史数据
		onReachBottom() {
			console.log('onReachBottom')
			if (this.currentIndex == 1) {
				this.getOlderRecord()
			}
		},
		methods: {
			// 附件上传恶心的代码块-------------------------------------------------------------
			// 某文件上传结束回调(成功失败都回调)
			onuploadEnd(item) {
				console.log('fuck you',3)
				if (item.type == 'fail') {
					return uni.showToast({title: '上传失败'})}
				try {
					let res = JSON.parse(item.responseText)
					if (res.code !== 0) {
						return uni.showToast({title: res.message || 'error'})}
					this.liuzhuanForm.attaches.push({name: item.name, path: res.data})
				} catch (err) {
					uni.showToast({title: err.message})}
				this.$forceUpdate();
			},
			// 上传进度回调
			onprogress(item) {
				this.files.set(item.name,item);// 更新当前状态变化的文件
				this.$forceUpdate();// 强制更新视图
			},
			// 文件选择回调
			onChange(files) {
				this.files = files;// 更新选择的文件 
				this.$forceUpdate();// 强制更新视图
			},
			// 穿刺一击让他们的遮罩层消失
			chuanci(){
				this.$refs.lsjUpload && this.$refs.lsjUpload.hide();
			},
			// 穿刺一击让他们的遮罩层消失
			chuanci2(){
				this.$refs.lsjUpload && this.$refs.lsjUpload.show();
				this.$forceUpdate()
			},
			// 强制重置附件按钮,万一出意外点2次按钮至少可以进去
			fuckyou(){
				this.$refs.lsjUpload && this.$refs.lsjUpload.hide()
				this.$refs.lsjUpload && this.$refs.lsjUpload.show()
				this.$forceUpdate()
			},
			// 附件上传恶心的代码块-------------------------------------------------------------
			// 获取最新的通知
			async getNewestRecord() {
				try {
					if (this.applyRecord.length == 0) {
						let res = await websock.gongwenLiuzhuanRecord({
							pageCount: 10,
							keyword: this.keyword
						})
						console.log('getRecordList list empty', res)
						uni.stopPullDownRefresh()
						this.applyRecord = [...res, ...this.applyRecord]
					} else {
						let res = await websock.gongwenLiuzhuanRecord({
							greaterThan: this.applyRecord[0].id,
							pageCount: 10,
							keyword: this.keyword
						})
						console.log('getRecordList list not empty', res)
						uni.stopPullDownRefresh()
						this.applyRecord = [...res, ...this.applyRecord]
					}
				} catch (e) {
					uni.showToast({
						title: e.message
					})
				}
			},
			// 获取老的数据
			async getOlderRecord() {
				this.moreStatus = 'loading'
				try {
					if (this.applyRecord.length == 0) {
						console.log('before get list empty')
						let res = await websock.gongwenLiuzhuanRecord({
							pageCount: 10,
							keyword: this.keyword
						})
						console.log('getOlderRecord list empty', res)
						this.applyRecord = [...this.applyRecord, ...res]
						if (res.length < 10) {
							this.moreStatus = 'noMore'
						} else {
							this.moreStatus = 'more'
						}
					} else {
						console.log('before get list not empty')
						let res = await websock.gongwenLiuzhuanRecord({
							lessThan: this.applyRecord[this.applyRecord.length - 1].id,
							pageCount: 10,
							keyword: this.keyword
						})
						console.log('getOlderRecord list not empty', res)
						this.applyRecord = [...this.applyRecord, ...res]
						if (res.length < 10) {
							this.moreStatus = 'noMore'
						} else {
							this.moreStatus = 'more'
						}
					}
				} catch (e) {
					uni.showToast({
						title: e.message
					})
				}
			},
			// clickSelectReader() {
			// 	uni.navigateTo({
			// 		url: '/pages/common/contactSelect?extraKey=auditor1',
			// 		events: {
			// 			contactInfo: data => {
			// 				console.log('select reader', data)
			// 				for (let i = 0; i != this.liuzhuanForm.readers.length; i++) {
			// 					if (this.liuzhuanForm.readers[i].uid == data.contactInfo.uid) return
			// 				}
			// 				this.liuzhuanForm.readers.push(data.contactInfo)
			// 			}
			// 		}
			// 	})
			// },
			
			clickSelectReader() {
				uni.navigateTo({
					url: '/pages/common/contactSelect?selectedUsers=' + JSON.stringify(this.liuzhuanForm.readers || []),
					events: {
						contactList: data => {
							console.log('select readers', data)
							this.liuzhuanForm.readers = data.contactList
						}
					}
				})
			},
			
			clickSelectAuditor() {
				uni.navigateTo({
					url: '/pages/common/contactSelect?selectedUsers=' + JSON.stringify(this.liuzhuanForm.auditors || []),
					events: {
						contactList: data => {
							console.log('select auditor', data)
							this.liuzhuanForm.auditors = data.contactList
						}
					}
				})
			},
			clickSelectfuzeren() {
				uni.navigateTo({
					url: '/pages/common/contactSelect?extraKey=auditor1',
					events: {
						contactInfo: data => {
							console.log('select auditor', data)
							this.liuzhuanForm.fuzeren = data.contactInfo
						}
					}
				})
			},
			rmfuzeren() {
				this.liuzhuanForm.fuzeren = null
			},
			// 获取格式化时间字符串
			getFormatedTimeStr(stamp, str='MM-DD HH:mm:ss') {
				return moment(stamp).format(str)
			},
			async clickApply() {

				if (!this.liuzhuanForm.danwei) return uni.showToast({
					title: '请输入来文单位',icon:'none'
				})
				if (!this.liuzhuanForm.biaoti) return uni.showToast({
					title: '请输入标题',icon:'none'
				})
				if (!this.liuzhuanForm.chengwenDate) return uni.showToast({
					title: '请选择来文日期',icon:'none'
				})

				if (this.liuzhuanForm.auditors.length == 0) return uni.showToast({
					title: '请选择审核人',icon:'none'
				})

				// #ifndef H5
				if (this.liuzhuanForm.attaches.length == 0) return uni.showToast({
					title: '请添加附件',icon:'none'
				})
				// #endif

				// let readers = []
				// for (let i = 0; i != this.liuzhuanForm.readers.length; i++) {
				// 	readers.push({
				// 		uid: this.liuzhuanForm.readers[i].uid,
				// 		name: this.liuzhuanForm.readers[i].name
				// 	})
				// }

				let auditors = []
				for (let i = 0; i != this.liuzhuanForm.auditors.length; i++) {
					auditors.push({uid: this.liuzhuanForm.auditors[i].uid, stepName: this.liuzhuanForm.auditors[i].stepName || this.liuzhuanForm.auditors[i].positionName})
				}

				try {
					await websock.gongwenLiuzhuan({
						danwei: this.liuzhuanForm.danwei,
						wenhao: this.liuzhuanForm.wenhao,
						biaoti: this.liuzhuanForm.biaoti,
						chengwenDate: this.liuzhuanForm.chengwenDate,
						zhaiyao: this.liuzhuanForm.zhaiyao || '',
						pics: this.liuzhuanForm.pics,
						attaches: this.liuzhuanForm.attaches || [],
						// readers,
						auditors
					})

					uni.showToast({
						title: '申请成功'
					})

					this.files = new Map()
					this.liuzhuanForm = {
						danwei: '',
						wenhao: '',
						biaoti: '',
						chengwenDate: '',
						zhaiyao: '',
						readers: [],
						attaches: []
					}

					this.currentIndex = 1
					this.getNewestRecord()
				} catch (err) {
					uni.showToast({
						title: err.message || 'error'
					})
				}
			},
			async revertApply(idx) {
				try {
					await websock.revertGongwenLiuzhuan({
						id: this.applyRecord[idx].id
					})
					this.applyRecord[idx].sta = 4
				} catch (err) {
					console.error(err)
					uni.showToast({
						title: err.message || 'error'
					})
				}
			},
			seeDetail(idx) {
				uni.navigateTo({
					url: `/pages/task/gongwenLiuzhuanDetail?id=${this.applyRecord[idx].id}`
				})
			},
			search() {
				console.log('search', this.keyword)
				this.applyRecord = []
				this.getNewestRecord()
			},
			onClickItem(e) {
				if (this.currentIndex !== e.currentIndex) {
					this.currentIndex = e.currentIndex
				}
			}
		}
	}
</script>

<style>
	@import '../common/common.css';
</style>
